<template >

    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px; background-color: #b2b2b2"  >
            <el-form :inline="true" :model="searchForm">
                <el-form-item>
                    <el-input v-model="searchForm.name" placeholder="店铺名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="getUsers">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" @click="shopAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表  :stripe="true"斑马纹-->
        <el-table :data="shops" highlight-current-row v-loading="listLoading"
                  @selection-change="selsChange" style="width: 100%" :stripe="true">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" align="center">
            </el-table-column>
            <el-table-column prop="name" label="商铺名称" align="center">
            </el-table-column>
            <el-table-column prop="state" label="审核状态" align="center">
                <template scope="scope">
					<span v-if="scope.row.state == 0" style="color:#0c80ba">待审核
						<el-button type="success" size="small" @click="auditeEdit(scope.$index, scope.row)" >审核</el-button>
					</span>
                    <span v-if="scope.row.state == -1" style="color: red">已禁用
						<el-button type="success" size="small" @click="auditeEdit(scope.$index, scope.row)" >审核</el-button>
					</span>
                    <span v-if="scope.row.state == 1" style="color: chartreuse">已入驻
						<el-button type="danger" size="small" @click="auditeforbidden(scope.$index, scope.row)" >禁用</el-button>
					</span>
                </template>
            </el-table-column>
            <el-table-column prop="logo" label="店铺logo" align="center" >
                <template slot-scope="scope">
                    <el-popover
                            placement="right"
                            width="200"
                            trigger="hover">
                        <img :src="scope.row.logo" class="imgStyle"/>
                        <img slot="reference" :src="scope.row.logo" style="max-height: 50px;max-width: 150px">
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="tel" label="店铺座机"  align="center">
            </el-table-column>
            <el-table-column prop="registerTime" label="入驻时间"  align="center" >
                <template slot-scope="scope">
					<span>
						{{operatingTime(scope.row.registerTime)}}
					</span>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="店铺地址"  align="center">
            </el-table-column>
            <el-table-column prop="admin.username" label="店铺管理员" align="center" >
            </el-table-column>

            <el-table-column label="操作" align="center">
                <template scope="scope">
                    <el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)" round>删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
            </el-pagination>
        </el-col>

        <!--新增编辑审核公共界面-->
        <el-dialog :title="title" v-model="UserFormVisible" :close-on-click-modal="false" v-loading="UserLoading" >
            <el-form :model="UserForm" label-width="80px" :rules="UserFormRules" ref="UserForm"  >
                <el-form-item label="店铺名称" prop="name">
                    <el-input v-model="UserForm.name" auto-complete="off" :readonly="UserFormread"></el-input>
                </el-form-item>
                <el-form-item label="店铺座机" prop="tel">
                    <el-input v-model="UserForm.tel" auto-complete="off" :readonly="UserFormread"></el-input>
                </el-form-item>
                <el-form-item label="店铺地址" prop="address">
                    <el-input v-model="UserForm.address" auto-complete="off" :readonly="UserFormread"></el-input>
                </el-form-item>
                <el-form-item label="入驻时间" prop="registerTime">
                    <el-date-picker type="date" v-model="UserForm.registerTime" auto-complete="off" :readonly="UserFormread"></el-date-picker>
                </el-form-item>
                <el-form-item label="管理员" prop="admin" :readonly="UserFormread">
                    <el-input v-model="UserForm.admin.username" auto-complete="off" :readonly="true"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" align="center">
                <el-button type="danger" @click.native="UserFormVisible = false,UserFormread = false,auditdisabled = false">取消</el-button>
                <el-button type="primary" @click.native="UserSubmit" :loading="UserLoading"  :style="{ display: UserSubmitdisplay }">提交</el-button>
                <el-button type="primary" @click.native="audit" :loading="UserLoading" :style="{ display: audityesdisplay }">通过</el-button>
                <el-button type="danger" @click.native="auditno" :loading="UserLoading"  :style="{ display: auditnodisplay }">驳回</el-button>
                <el-button type="danger" @click.native="audit" :loading="UserLoading"  :style="{ display: Forbiddendisplay}">禁用</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
    import util from '../../common/js/util'
    import { getUserListPage, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api';
    export default {
        data() {
            return {
                //搜索
                searchForm: {
                    name: ''
                },
                //主列表
                shops: [],
                total: 0,
                page: 1,
                listLoading: false,//列表加载效果
                sels: [],//列表选中列
                UserSubmitdisplay:'',//提交按钮
                audityesdisplay:'',//审核通过按钮
                auditnodisplay:'',//审核驳回按钮
                Forbiddendisplay:'',//禁用按钮
                UserFormread: false,//只读默认关闭
                UserFormVisible: false,//编辑界面是否显示
                UserLoading: false,//加载效果默认关闭
                UserFormRules: {

                },
                //新增编辑界面数据
                UserForm: {
                    name: '',
                    tel:'',
                    registerTime: '',
                    state: '',
                    address:'',
                    logo:'',
                    admin:{
                        username:'',
                    }
                },
                title:'',
                //下拉
                admins:[],
            }
        },
        methods:{
            operatingTime(timeDate){
                return this.$moment(timeDate).format('YYYY-MM-DD')
            },
            handleCurrentChange(val) {//获取所在页码
                this.page = val;
                this.getUsers();//点击页码时调用钩子方法
            },
            //获取用户列表
            getUsers() {
                let para = {
                    currentPage: this.page,
                    keywords:this.searchForm.name,
                };
                //打开加载转圈圈的效果
                this.listLoading = true;
                //查询数据
                this.$http.post("/shop",para).then(res=>{
                    this.shops = res.data.data;
                    this.total = res.data.total;
                    //关闭加载的效果
                    this.listLoading = false;
                });
            },
            selsChange: function (sels) {
                this.sels = sels;
            },
            //显示审核界面
            auditeEdit: function(index, row){
                this.UserFormVisible = true;//界面开启
                this.title='审核';
                this.UserSubmitdisplay='none';//提交按钮
                this.audityesdisplay='';//审核通过按钮
                this.auditnodisplay='';//审核驳回按钮
                this.Forbiddendisplay='none';//禁用按钮
                this.UserFormread = true;//只读开启
                this.UserForm = Object.assign({}, row);
            },
            //显示审核禁用界面
            auditeforbidden: function(index, row){
                this.UserFormVisible = true;//界面开启
                this.title='审核';
                this.UserSubmitdisplay='none';//提交按钮
                this.audityesdisplay='none';//审核通过按钮
                this.auditnodisplay='none';//审核驳回按钮
                this.Forbiddendisplay='';//禁用按钮
                this.UserFormread = true;//只读开启
                this.UserForm = Object.assign({}, row);
            },
            //显示新增界面
            shopAdd: function () {
                this.UserFormVisible = true;//开启界面
                this.UserFormread = false;//只读关闭 
                this.UserSubmitdisplay='';//提交按钮
                this.audityesdisplay='none';//审核通过按钮
                this.auditnodisplay='none';//审核驳回按钮
                this.Forbiddendisplay='none';//禁用按钮
                this.title='新增';
                this.UserForm = {
                        name: '',
                        tel:'',
                        registerTime: '',
                        state: '',
                        address:'',
                        logo:'',
                        admin:{
                            username:''
                        }
                };
            },
            //显示编辑界面
            handleEdit: function (index, row) {
                this.UserFormVisible = true;//开启界面
                this.UserFormread = false;//只读关闭
                this.UserSubmitdisplay='';//提交按钮
                this.audityesdisplay='none';//审核通过按钮
                this.auditnodisplay='none';//审核驳回按钮
                this.Forbiddendisplay='none';//禁用按钮
                this.title='编辑';
                this.UserForm = Object.assign({}, row);
            },
            //通过审核
            audit: function(){
                /**状态为禁用或待审核*/
                if (this.UserForm.state == 0 || this.UserForm.state == -1){
                    this.$confirm(this.UserForm.name + ' 确认审核通过吗?', '提示', {
                        type: 'warning'
                    }).then(() => {
                        //把表单的数据组装为json
                        let para = Object.assign({}, this.UserForm);
                        this.UserLoading = true;
                        this.$http.post('/shop/audityes',para).then((res) => {
                            if (res.data.success){
                                this.UserLoading = false;
                                this.$message({
                                    message: '操作成功!' +
                                        '等待审核通过' +
                                        '请留意邮箱发送的邮件',
                                    type: 'success'
                                });
                                //关闭 审核界面
                                this.UserFormVisible = false;
                            }else {
                                this.$message({
                                    message: "激活邮件发送失败"+res.data.message,
                                    type: 'warning'
                                });
                                this.UserLoading = false;
                            }
                            this.getUsers();
                        });
                    })
                }else {/**状态为正常只能是禁用*/
                    this.$confirm('确认'+this.UserForm.name+'禁用吗?', '提示', {
                        type: 'warning'
                    }).then(() => {
                        //把表单的数据组装为json
                        let para = Object.assign({}, this.UserForm);
                        this.UserLoading = true;
                        this.$http.post('/shop/auditForbidden',para).then((res) => {
                            if (res.data.success){
                                this.UserLoading = false;
                                this.$message({
                                    message: '禁用成功!',
                                    type: 'success'
                                });
                                //关闭 审核界面
                                this.UserFormVisible = false;
                            }else {
                                this.$message({
                                    message: "禁用失败"+res.data.message,
                                    type: 'warning'
                                });
                                this.UserLoading = false;
                            }
                            this.getUsers();
                        });
                    })
                }
            },

           /**审核驳回*/
            auditno: function(index, row){
                this.$confirm(this.UserForm.name+'的申请确认驳回吗?', '提示',{
                    type: 'warning'
                }).then(() => {
                    //把表单的数据组装为json
                    let para = Object.assign({}, this.UserForm);
                    this.UserLoading = true;
                    this.$http.delete('/shop/audityno',para).then((res) => {
                        if (res.data.success){
                            this.UserLoading = false;
                            this.$message({
                                message: '邮件发送成功!',
                                type: 'success'
                            });
                            //关闭 审核界面
                            this.UserFormVisible = false;
                        }else {
                            this.$message({
                                message: "邮件发送失败"+res.data.message,
                                type: 'warning'
                            });
                            this.UserLoading = false;
                        }
                        this.getUsers();
                    });
                })
            },
           /** 编辑和新增提交*/
            UserSubmit: function () {
                //验证当前的表单是否符合验证规则
                this.$refs.UserForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.UserLoading = true;
                            //把表单的数据组装为json
                            let para = Object.assign({}, this.UserForm);
                            //console.debug(para)
                            this.$http.put('/shop',para).then((res) => {
                                this.UserLoading = false;
                                if (res.data.success){
                                    this.$message({
                                        message: '提交成功',
                                        type: 'success'
                                    });
                                }else {
                                    this.$message({
                                        message: "更新失败"+res.data.message,
                                        type: 'warning'
                                    });
                                }
                                //重置表单-调用现成的方法 清空数据
                                this.$refs['UserForm'].resetFields();
                                //关闭 更新界面
                                this.UserFormVisible = false;
                                //重新刷新页面数据 钩子方法
                                this.getUsers();
                            });
                        });
                    }
                });
            },
            /**单个删除*/
            handleDel: function (index, row) {
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;

                    let para = { id: row.id };
                    this.$http.delete("/shop/"+para.id).then((res) => {
                        this.listLoading = false;
                        if (res.data.success){
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        }else {
                            this.$message({
                                message: "删除失败"+res.data.message,
                                type: 'warning'
                            });
                        }
                        this.getUsers();
                    });
                }).catch(() => {
                });
            },
            /**批量删除*/
            batchRemove: function () {
                var ids = this.sels.map(item => item.id);
                var names = this.sels.map(item => item.name).toString();
                this.$confirm('确认删除选中记录 '+ names +' 吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    //NProgress.start();
                    //console.debug(ids);
                    let para = { ids: ids };
                    this.$http.post('/shop/dels',ids).then((res) => {
                        this.listLoading = false;
                        //NProgress.done();
                        if (res.data.success){
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        }else {
                            this.$message({
                                message: "删除失败"+res.data.message,
                                type: 'warning'
                            });
                        }
                        this.getUsers();
                    });
                }).catch(() => {
                });
            },
        },
        mounted() {
            /**当页面加载完以后。执行的钩子方法*/
            this.getUsers();
        }
    }
</script>
<style scoped>
    .imgStyle{
        height: 200px;
    }
</style>